import React,{Component} from 'react'
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Button,
  TouchableOpacity,
  Alert
} from 'react-native'
//import Swipeout from 'react-native-swipeout';
// Buttons
// 
//引入异步处理函数
import NetUitl from '../../common/fetchcomponent'
//引入倒计时模块
//import {CountDownText} from 'react-native-sk-countdown'
export default class Login extends Component{
  //constructor
  constructor(props){
    super(props)
    this.state = {
      codeSent:false,
      phoneNumber:'',
      verifyCode:'',
      countingDone:false,
    }
  }
  _submit(){

  }
  _showVerifycode(){

  }
  _sendVerifyCode(){
    const phoneNumber = this.state.phoneNumber
    if(!phoneNumber){
     return Alert.alert('手机号不能为空')
    }
    
    const geturl= 'http://192.168.3.50/public/caiji/Appfetch/get?id=3103'
    const posturl = 'http://192.168.3.50/public/caiji/Appfetch/post'
    const body = {
      phoneNumber:phoneNumber
    }
    NetUitl.get(geturl,{accessToken:'abcdef'})
      .then((data)=>{
        Alert.alert(JSON.stringify(data)) 
        this.setState({codeSent:true})
      }).catch((error)=>{
        console.log(error)
      })
    //Alert.alert(phoneNumber)
  }
  _countingDone(){
    this.setState({
      countingDone:true
    })
  }
  render(){
    return (
      <View style={styles.container}>
        <View style={styles.signupBox}>
          <Text style={styles.title}>快速登录</Text>
          <TextInput 
            placeholder='输入手机号'
            autoCaptialize={'none'}
            autoCorrect={false}
            keyboradType={'number-pad'}
            style = {styles.inputFiled}
            onChangeText={(text)=>{
              this.setState({
                phoneNumber:text
              })
            }}            
          />
          {this.state.codeSent
            ?<View style={styles.verfiyCodeBox}>
              <TextInput 
                placeholder='输入验证码'
                autoCaptialize={'none'}
                autoCorrect={false}
                keyboradType={'number-pad'}
                style = {styles.inputFiled}
                onChangeText={(text)=>{
                  this.setState({
                    verifyCode:text
                  })
                }}
                />
                {
                  this.state.countingDone
                  ?<Button
                    style={styles.countBtn}
                    onPress={this._sentVerifyCode.bind(this)}>获取验证码</Button>
                  :null
                  // :<CountDownText
                  //   styles={styles.countBtn}
                  //   countType = "seconds"
                  //   auot = {true}
                  //   afterEnd = {this._countingDone.bind(this)}
                  //   timeLeft = {60}
                  //   step = {-1}
                  //   startText='开始计时' 
                  //   endText='结束计时'
                  //   intervalText={(sec) => '还有' + sec + 's'}
                  //   //onInterval = (sec) => {}
                  //   />
                }            
              
            </View>
            :null
          }
          {this.state.codeSent
            ?<TouchableOpacity 
              onPress={this._submit.bind(this)}>
                <View style={styles.btn}>
                  <Text>登录</Text>
                </View> 
             </TouchableOpacity>
            :<TouchableOpacity  
                onPress={this._sendVerifyCode.bind(this)}>
                <View style={styles.btn}>
                  <Text style={styles.text}>注册</Text>
                </View>
              </TouchableOpacity>
          }
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex:1,
    padding:10,
    backgroundColor:'#dedede'
  },
  signupBox:{
    marginTop:30,
  },
  title:{
    marginBottom:20,
    color:'#333',
    fontSize:20,
    textAlign:'center'
  },
  inputFiled:{
    height:40,
    padding:5,
    color:'#666',
    fontSize:16,
    backgroundColor:'#fff',
    borderRadius:4
  },
  verfiyCodeBox:{
    marginTop:10,
    flexDirection:'row',
    justifyContent:'space-between'
  },
  countBtn:{
    width:110,
    height:40,
    padding:10,
    marginLeft:8,
    backgroundColor:'transparent',
    borderColor:'#ee7357',
    fontWeight:'600',
    fontSize:15,
    borderRadius:2
  },
   btn:{

    marginTop:10,
    padding:10,
    backgroundColor:'#ffffff',
    borderColor:'#ee735c',
    borderRadius:4,
  },
  text:{
    textAlign:'center'
  }
})